<template>
  <a-drawer title="新增小区" :maskClosable="false" width=650 placement="right" :closable="false" @close="onClose"
    :visible="communityAddVisiable" style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-form-item label='小区名称' v-bind="formItemLayout" :validateStatus="validateStatus" :help="help">
        <a-input v-model="community.commName" v-decorator="['commName']" />
      </a-form-item>
      <a-form-item label='小区地址' v-bind="formItemLayout" :validateStatus="validateStatus" :help="help">
        <a-input v-model="community.address" v-decorator="['address']" />
      </a-form-item>
      <a-form-item label='小区描述' v-bind="formItemLayout">
        <a-textarea :rows="4" v-model="community.remark" v-decorator="[
          'remark',
          {rules: [
            { max: 50, message: '长度不能超过50个字符'}
          ]}]">
        </a-textarea>
      </a-form-item>
    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>
</template>
<script>
  const formItemLayout = {
    labelCol: {
      span: 3
    },
    wrapperCol: {
      span: 18
    }
  }
  export default {
    name: 'CommunityAdd',
    props: {
      communityAddVisiable: {
        default: false
      }
    },
    data() {
      return {
        menuTreeKey: +new Date(),
        loading: false,
        formItemLayout,
        form: this.$form.createForm(this),
        validateStatus: '',
        menuSelectStatus: '',
        help: '',
        menuSelectHelp: '',
        community: {
          commName: '',
          remark: '',
          address: ''
        },
        checkedKeys: [],
        expandedKeys: [],
        menuTreeData: [],
        allTreeKeys: [],
        checkStrictly: true
      }
    },
    methods: {
      reset() {
        this.menuTreeKey = +new Date()
        this.expandedKeys = this.checkedKeys = []
        this.validateStatus = this.help = ''
        this.loading = false
        this.form.resetFields()
      },
      onClose() {
        this.reset()
        this.$emit('close')
      },
      handleSubmit() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.loading = true
            this.$post('community', {
              ...this.community
            }).then((r) => {
              this.reset()
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          }
        })
      }
    }
  }

</script>
